<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>菜鸟教程(runoob.com)</title>
    <style>
      /* 如果子盒子写死的的宽度超过了父盒子 那么子盒子需要动态缩小 flex-shrink就是根据每个盒子设置的flex-shrink进行相加 设置每个盒子占比多少就减小超出父盒子大小乘以占比的大小 */
      #content {
        display: flex;
        width: 500px;
      }

      #content div {
        flex-basis: 120px;
        border: 3px solid rgba(0, 0, 0, 0.2);
      }

      .box {
        flex-shrink: 1;
      }

      .box1 {
        flex-shrink: 2;
      }
    </style>
  </head>
  <body>
    <p>div 总宽度为 500px, flex-basic 为 120px。</p>
    <p>A, B, C 设置 flex-shrink:1。 D , E 设置为 flex-shrink:2</p>
    <p>D , E 宽度与 A, B, C 不同</p>
    <div id="content">
      <div class="box" style="background-color: red">A</div>
      <div class="box" style="background-color: lightblue">B</div>
      <div class="box" style="background-color: yellow">C</div>
      <div class="box1" style="background-color: brown">D</div>
      <div class="box1" style="background-color: lightgreen">E</div>
    </div>
  </body>
</html>
